<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息测试</title>
</head>
<body>
<!--数据列表-->
<div align="right">
    <form  >
            <input type="search" name="sname" placeholder="请输入姓名：">
            <input type="search" name="telephone" placeholder="请输入手机号：">
            <input id="search" type="button" value="查找">
    </form>
</div>
<table id="dataList" class="table table-bordered table-striped table-hover dataTable" border="1">
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
        <th>QQ</th>
        <th>微信</th>
        <th>年级</th>
        <th>入学日期</th>
        <th>城市</th>
        <th>生日</th>
        <th>地址</th>
    </tr>
    </thead>

</table>
<!--数据列表/-->
<p align="center">
    <a href="#" id="first">首页</a>
    <a href="#" id="prev">上一页</a>
    <a href="#" id="next">下一页</a>
    <a href="#" id="last">末页</a>
</p>

<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script>
    //读取JSON数据
    $(function(){
        let pageNo=1;
        var total=1;
        var sname="";
        var telephone="";
        var t=$("#dataList");
        $("a#first").click(function(){
            pageNo=1;
            load();
        });
        $("a#prev").click(function(){
            if(pageNo<=1)
                return;
            pageNo--;
            load();
        });
        $("a#next").click(function(){
            if(pageNo>=total)
                return;
            pageNo++;
            load();
        });
        $("a#last").click(function(){
            pageNo=total;
            load();
        });


        function load(){
            t.find("tr:gt(0)").remove();

            // alert(sname+"="+telephone);
            $.get("/myWeb_war_exploded/doStudentInfoServlet",{
                "pageNo":pageNo,
                "sname":sname,
                "telephone":telephone
            },function(data){
                total=data.pageNum;//外部的total赋值
                $.each(data.stuDatas,function(i,d){
                    t.append("<tbody><tr>" +
                        "<td>"+d.stuno+"</td>" +
                        "<td>"+d.sname+"</td>" +
                        "<td>"+d.sex+"</td>" +
                        "<td>"+d.telephone+"</td>" +
                        "<td>"+d.qq+"</td>" +
                        "<td>"+d.wechat+"</td>" +
                        "<td>"+d.gradeid+"-"+d.gname+"</td>" +
                        "<td>"+d.enterdate+"</td>" +
                        "<td>"+d.fromcity+"</td>" +
                        "<td>"+d.birthday+"</td>" +
                        "<td>"+d.address+"</td>" +
                        "</tr></tbody>");
                });
            });
        }

        load();

        $("#search").click(function(){
            sname=$(":input[name=sname]").val();
            telephone=$(":input[name=telephone]").val();
            alert(sname+"+"+telephone);
            load();
        });
    });
</script>

</body>
</html>